<template>
<div class="end">
  <transition name="fade" @after-enter="$set(show,1,true)">
    <div class="end" v-show="show[0]">
      <div @click="$emit('setPage',1)" class="btn" />
      <transition name="fade" @after-enter="$set(show,2,true)">
        <div class="contant" v-show="show[1]">
          <div class="main" />
          <transition name="fade">
            <div class="e1" v-show="show[2]" />
          </transition>
          <transition name="fade" @after-enter="$set(show,3,true)">
            <div class="e2" v-show="show[2]" />
          </transition>
          <transition name="fade" @after-enter="$set(show,4,true)">
            <div class="e3" v-show="show[3]">
              <img src="~assets/e3.png" />
            </div>
          </transition>
          <transition name="fade">
            <div class="e4" v-show="show[4]" />
          </transition>
          <div class="bottom" />
        </div>
      </transition>
    </div>
  </transition>
</div>
</template>

<script>
const RATE = window.screen.height/window.screen.width
export default {
  name: 'end',
  props: {
    visible: {
      type: Boolean,
      default () {
        return false
      }
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.$set(this.show, 0, true)
      } else {
        this.show.forEach((v, i) => {
          this.$set(this.show, i, false)
        })
      }
    }
  },
  // mounted(){
  //   this.$set(this.show, 0, true)
  // },
  data() {
    return {
      show: [false, false, false, false, false, false]
    }
  },
  created() {
    this.show.forEach((v, i) => {
      this.$set(this.show, i, false)
    })
  },
}
</script>

<style lang="stylus">
.fade-enter-active
  transition: all 0.5s cubic-bezier(1, 0.5, 0.3, 0.1);
  opacity: 1;
.fade-enter
  opacity: 0;
.end
  width: 100vw
  height: 100%
  background: url('~assets/b26.jpg') no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
  .btn
    top: 50%;
    margin-top: calc(-50vw*(950/640) - 30px);
  .contant
    width: 100vw;
    height: calc(100vw*(950/640));
    position: absolute;
    top: 50%;
    margin-top: calc(-50vw*(950/640));
    .head
      position: absolute;
      top: 0;
      left: calc(100vw*(16/640));
    .main
      width: calc(100vw*(608/640));
      height: calc(100vw*(829/640));
      position: absolute;
      left: 50%;
      top: calc(100vw*(53/640));
      margin-left: calc(-50vw*(608/640));
      background: url('~assets/m3.png') no-repeat;
      background-size: 100% 100%;
    .e1
      width: calc(100vw*(436/640));
      height: calc(100vw*(155/640));
      position: absolute;
      top: calc(100vw*(225/640));
      left: calc(100vw*(100/640));
      background: url('~assets/e1.png') no-repeat;
      background-size: 100% 100%;
    .e2
      width: calc(100vw*(203/640));
      height: calc(100vw*(32/640));
      position: absolute;
      top: calc(100vw*(435/640));
      left: 50%;
      margin-left: calc(-50vw*(203/640));
      background: url('~assets/e2.png') no-repeat;
      background-size: 100% 100%;
    .e3
      position: absolute;
      text-align: center;
      width: 100%;
      top: calc(100vw*(540/640));
      img
        width:calc(100vw*(203/640));
        margin-left: -200px;
        margin-top: -200px;
        padding-left:200px;
        padding-top: 200px;
    .e4
      width: calc(100vw*(203/640));
      height: calc(100vw*(17/640));
      position: absolute;
      top: calc(100vw*(761/640));
      left: 50%;
      margin-left: calc(-50vw*(203/640));
      background: url('~assets/e4.png') no-repeat;
      background-size: 100% 100%;
    .bottom
      width: calc(100vw*(608/640));
      height: calc(100vw*(56/640));
      position: absolute;
      left: 50%;
      top: calc(100vw*(886/640));
      margin-left: calc(-50vw*(608/640));
      background: url('~assets/b3.png') no-repeat;
      background-size: 100% 100%;
@media only screen and (device-aspect-ratio:3/4),
only screen and (device-aspect-ratio:512/683)
  .end
    height: 100%
    background: url('~assets/ipad/b26.jpg') no-repeat;
    background-size: 100% 100%;
    .btn
      top: calc(100%*(9/800))
      margin-top: -30px;
    .contant
      height: 100%;
      top: -50%;
      transform: translateY(50%);
      margin-top: 0;
      .main
        width: calc(100vw*(608/640));
        height: calc(100%*(663/800));
        top: calc(100%*(62/800))
        background: url('~assets/ipad/m3.png') no-repeat;
        background-size: 100% 100%;
      .e1
        width: calc(100vw*(312/640));
        height: calc(100%*(117/800));
        top: calc(100%*(219/800));
        left: calc(100vw*(164/640));
        background: url('~assets/ipad/e1.png') no-repeat;
        background-size: 100% 100%;
      .e2
        width: calc(100vw*(145/640));
        height: calc(100%*(21/800));
        top: calc(100%*(374/800));
        left: 50%;
        margin-left: calc(-50vw*(145/640));
        background: url('~assets/ipad/e2.png') no-repeat;
        background-size: 100% 100%;
      .e3
        top: calc(100%*(444/800));
        img
          width:calc(100vw*(145/640));
          margin-left: -200px;
          margin-top: -200px;
          padding-left:200px;
          padding-top: 200px;
      .e4
        width: calc(100vw*(145/640));
        height: calc(100%*(15/800));
        top: calc(100%*(606/800));
        margin-left: calc(-50vw*(145/640));
        background: url('~assets/ipad/e4.png') no-repeat;
        background-size: 100% 100%;
      .bottom
        height: calc(100%*(56/800));
        top:calc(100%*(735/800));
        background: url('~assets/ipad/b3.png') no-repeat;
        background-size: 100% 100%;
</style>
